
<template>
  <div>{{ count }}</div>
  <div>{{ double }}</div>
  <button @click="increase">+1</button>
</template>

<script lang="ts">
/**
 * 生命周期
 */
import { computed, reactive, toRefs, watch } from "vue";

interface DataProps {
  count: number;
  double: number;
  increase: () => void;
}

export default {
  name: "watch",
  setup() {
    const data: DataProps = reactive({
      count: 0,
      increase: () => {
        data.count++;
      },
      double: computed(() => {
        return data.count * 2;
      }),
    });

    // 监控响应式数据变化
    watch([() => data.count], (newVal, val) => {
      console.log(newVal);
      console.log(val);
      console.log("发生变化了");
    });

    // 设置响应式对象
    const toRefsData = toRefs(data);
    return {
      ...toRefsData,
    };
  },
};
</script>



<style>
</style>
